<template>
  <div class="page">
    <div class="left">
      <!-- <p class="title-left">
        {{ record?.fileName || "--" }}
      </p> -->
    </div>
    <div class="center">
      <div class="video-container">
        <div class="video-title">
          <div class="title-left">
            <ElPopover
              placement="top"
              trigger="hover"
              :width="300"
              v-if="record && record.fileName && record.fileName.length > 30"
            >
              <template #reference>
                <span class="spanText single-line-ellipsis">{{
                  record?.fileName || "--"
                }}</span>
              </template>
              <div class="multi-line-content">
                {{ record?.fileName || "--" }}
              </div>
            </ElPopover>
            <span class="spanText single-line-ellipsis" v-else>{{
              record?.fileName || "--"
            }}</span>
            <!-- <span>{{ currentIndex + 1 }}/{{ imgList.length }}</span> -->
          </div>
          <!-- <div v-if="isEdit" class="flex edit-title">
            <ElInput
              v-model="name"
              placeholder="请输入"
              clearable
              type="textarea"
              maxlength="100"
              autosize
              show-word-limit
              @input="handleNameInput"
              @blur="validateName"
              style="
                width: 168px;
                border-radius: 3px;
                border: 1px solid #2f69eb;
              "
            />
            <img :src="imgSrc" alt="" class="dui" @click="save" />
            <img :src="imgSrc1" alt="" class="dui" @click="cancelEdit" />
          </div>
          <div v-else>
            <div class="title-left">
              {{ name }}
              <img
                class="edit"
                src="/static/mediaList/video/edit.png"
                alt=""
                @click="isEdit = true"
              />
            </div>
          </div> -->
        </div>
        <div class="video-title-info">
          <img src="/static/mediaList/video/time.png" alt="" class="time" />
          <span>
            {{ record?.takeTime || "--" }}
          </span>
          <span style="margin-left: 12px;">
            {{ record?.fileSize || "--" }}
          </span>
          <span style="margin-left: 12px;">
            {{ record?.resolution || "--" }}
          </span>
        </div>
        <video
          :src="record?.fileUrl || ''"
          controls="controls"
          class="video"
          ref="videoRef"
          @play="onPlay"
          @pause="onPause"
          muted
        ></video>
        <div class="video-btns">
          <img
            src="/static/mediaList/video/left.png"
            class="img-center"
            alt="快退"
            @click="rewind"
          />
          <img
            :src="
              isPlaying
                ? '/static/mediaList/video/start.png'
                : '/static/mediaList/video/stop.png'
            "
            class="img-play"
            alt="播放/暂停"
            @click="togglePlay"
          />
          <img
            src="/static/mediaList/video/right.png"
            class="img-center"
            alt="快进"
            @click="fastForward"
          />
          <!-- <img
            :src="volumeIcon"
            class="img-center margin-left"
            alt="音量"
            @click="toggleMute"
          /> -->
          <div style="position: relative">
            <div class="volume-slider-container" v-show="showVolumeSlider">
              <div class="volume-display">{{ volumeLevel }}%</div>
              <input
                type="range"
                min="0"
                max="100"
                v-model="volumeLevel"
                class="volume-slider"
                @input="changeVolume"
                orient="vertical"
              />
            </div>
            <img
              src="/static/mediaList/video/sound.png"
              class="img-center margin-left"
              alt="音量控制"
              @click="toggleVolumeSlider"
            />
            <!-- :src="volumeIcon" -->
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <img
        src="/static/mediaList/video/close.png"
        alt=""
        class="close"
        @click="handleBack()"
      />
      <!-- <div class="time-container">
        <img src="/static/mediaList/video/time.png" alt="" class="time" />
        <p>{{ record?.takeTime || "--" }}</p>
      </div>
      <div class="info">
        <div class="item" v-for="item in info">
          <img :src="item.img" alt="" class="img" />
          <div class="text-container">
            <p class="text">{{ item.text }}</p>
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div> -->
      <div class="info-container">
        <div class="info">
          <h3>详细信息</h3>
          <div class="item">
            <span class="title">视频名称</span>
            <!-- <p>{{ name || "--" }}</p> -->
            <div v-if="isEdit" class="flex">
              <ElInput
                v-model="name"
                placeholder="请输入"
                clearable
                @input="handleNameInput"
                @blur="validateName"
                type="textarea"
                maxlength="100"
                show-word-limit
                style="
                  width: 168px;
                  border-radius: 3px;
                  border: 1px solid #2f69eb;
                "
              />
              <img :src="imgSrc" alt="" class="dui" @click="save" />
              <img :src="imgSrc1" alt="" class="dui" @click="cancelEdit" />
            </div>
            <div v-else>
              <div class="flex">
                <!-- <ElTooltip :content="name" placement="right">
                  <span class="single-line-ellipsis edit-name">
                    {{ name }}
                  </span>
                </ElTooltip> -->
                <ElPopover
                  placement="top"
                  trigger="hover"
                  :width="300"
                  v-if="
                    record && record.fileName && record.fileName.length > 30
                  "
                >
                  <template #reference>
                    <span class="spanText single-line-ellipsis edit-name">{{
                      record?.fileName || "--"
                    }}</span>
                  </template>
                  <div class="multi-line-content">
                    {{ record?.fileName || "--" }}
                  </div>
                </ElPopover>
                <span
                  class="spanText single-line-ellipsis edit-name edit-name"
                  v-else
                  >{{ record?.fileName || "--" }}</span
                >
                <img
                  class="edit"
                  src="/static/mediaList/video/edit.png"
                  alt=""
                  @click="isEdit = true"
                />
              </div>
            </div>
          </div>
          <div class="item">
            <span class="title">任务名称</span>
            <p>{{ record?.taskName || "--" }}</p>
          </div>
          <div class="item">
            <span class="title">航线名称</span>
            <p>{{ record?.airlineName || "--" }}</p>
          </div>
          <div class="item">
            <span class="title">分辨率</span>
            <p>{{ record?.resolution || "--" }}</p>
          </div>
          <div class="item">
            <span class="title">帧频</span>
            <p>{{ record?.frameRate || "--" }}</p>
          </div>
          <div class="item">
            <span class="title">视频大小</span>
            <p>{{ record?.fileSize || "--" }}</p>
          </div>
          <div class="item">
            <span class="title">视频时长</span>
            <p>{{ record?.duration || "--" }}</p>
          </div>
          <div class="item">
            <span class="title">拍摄时间</span>
            <p>{{ record?.takeTime || "--" }}</p>
          </div>
          <div class="item">
            <span class="title">拍摄负载</span>
            <p>{{ record?.deviceModel || "--" }}</p>
          </div>
          <!-- <div class="item-info" v-for="item in infoText">
          <div class="infoText-container">
            <p class="text-name">{{ item.name }}</p>
            <p class="text-val">{{ item.val }}</p>
          </div>
        </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  ElButton,
  ElInput,
  ElMessageBox,
  ElMessage,
  ElTooltip,
  ElPopover,
} from "element-plus";
import { onMounted, ref, computed, onUnmounted } from "vue";
import { router } from "#/router";
import { medialnfo, updateName } from "#/api/sys/media";

const name = ref("");
const originalName = ref(""); // 保存原始名称
const nameError = ref(false); // 名称验证错误状态
const isEdit = ref(false);
const imgSrc = ref("/static/mediaList/img/dui.png");
const imgSrc1 = ref("/static/mediaList/img/cuo.png");
const drawer = ref(true);
const info = ref([
  { id: 1, img: "/static/mediaList/video/1.png", text: "35°C", name: "温度" },
  { id: 2, img: "/static/mediaList/video/2.png", text: "58%", name: "湿度" },
  { id: 3, img: "/static/mediaList/video/3.png", text: "58%", name: "降水量" },
  { id: 4, img: "/static/mediaList/video/4.png", text: "小雨", name: "天气" },
  { id: 5, img: "/static/mediaList/video/5.png", text: "3.2m/s", name: "风速" },
]);
const record = ref<any>({});
const infoText = computed(() => [
  { id: 1, name: "视频名称：", val: record.value.fileName || "--" },
  { id: 2, name: "分辨率：", val: "--" },
  { id: 3, name: "帧频：", val: "--" },
  { id: 4, name: "视频大小：", val: "--" },
  { id: 5, name: "视频时长：", val: "--" },
  { id: 6, name: "上传时间：", val: record.value.takeTime || "--" },
]);
const videoRef = ref<HTMLVideoElement | null>(null);
const isPlaying = ref(false); // 播放状态
const volumeLevel = ref(0); // 默认音量0%
const isMuted = ref(true); // 默认静音
const showVolumeSlider = ref(false); // 是否显示音量滑块

// 计算音量图标
const volumeIcon = computed(() => {
  if (isMuted.value || volumeLevel.value === 0) {
    return "/static/mediaList/video/mute.png";
  } else if (volumeLevel.value > 50) {
    return "/static/mediaList/video/volume-high.png";
  } else {
    return "/static/mediaList/video/volume-low.png";
  }
});

const handleBack = () => {
  router.go(-1);
};

// 快退功能（10秒）
const rewind = () => {
  if (videoRef.value) {
    videoRef.value.currentTime = Math.max(0, videoRef.value.currentTime - 10);
  }
};

// 快进功能（10秒）
const fastForward = () => {
  if (videoRef.value) {
    videoRef.value.currentTime = Math.min(
      videoRef.value.duration,
      videoRef.value.currentTime + 10
    );
  }
};

// 切换播放/暂停状态
const togglePlay = () => {
  if (videoRef.value) {
    if (isPlaying.value) {
      videoRef.value.pause();
    } else {
      videoRef.value.play();
    }
  }
};

// 播放事件处理
const onPlay = () => {
  isPlaying.value = true;
};

// 暂停事件处理
const onPause = () => {
  isPlaying.value = false;
};

// 切换静音状态
const toggleMute = () => {
  if (videoRef.value) {
    isMuted.value = !isMuted.value;
    videoRef.value.muted = isMuted.value;
    if (!isMuted.value && volumeLevel.value === 0) {
      volumeLevel.value = 80;
      videoRef.value.volume = 0.8;
    }
  }
};

// 改变音量
const changeVolume = () => {
  if (videoRef.value) {
    const volume = volumeLevel.value / 100;
    videoRef.value.volume = volume;

    // 当音量为0时自动设置为静音
    if (volume === 0) {
      isMuted.value = true;
      videoRef.value.muted = true;
    } else {
      // 当音量大于0时取消静音
      isMuted.value = false;
      videoRef.value.muted = false;
    }
  }
};

// 切换音量滑块显示和静音状态
const toggleVolumeSlider = (event: Event) => {
  event.stopPropagation(); // 阻止事件冒泡
  showVolumeSlider.value = !showVolumeSlider.value;

  // 如果是静音状态，则切换为非静音
  if (isMuted.value && videoRef.value) {
    // 如果当前音量为0，设置为默认值30%
    // if (volumeLevel.value === 0) {
    //   volumeLevel.value = 30;
    // }

    // 应用音量设置
    videoRef.value.volume = volumeLevel.value / 100;
    videoRef.value.muted = false;
    isMuted.value = false;
  }
};

// 处理名称输入
const handleNameInput = (value: string) => {
  // 移除换行符和首尾空格
  let cleanedValue = value.replace(/[\r\n]/g, "").trim();
  name.value = cleanedValue;
};

// 验证名称
const validateName = () => {
  // 检查是否为空或只包含空格
  if (!name.value || name.value.trim() === "") {
    nameError.value = true;
    return false;
  }
  // 检查名称长度
  // if (name.value.length > 20) {
  //   nameError.value = true;
  //   return false;
  // }
  nameError.value = false;
  return true;
};

// 保存名称修改
const save = async () => {
  // 验证名称
  if (!validateName()) {
    ElMessage.error("名称不能为空");
    return;
  }

  // 检查名称是否与原始名称相同
  if (name.value === originalName.value) {
    isEdit.value = false;
    return;
  }

  isEdit.value = false;
  const params = {
    id: router.currentRoute.value.query.id,
    fileName: name.value,
  };
  const { code } = await updateName(params);
  if (code == 200) {
    ElMessage.success("修改成功");
    // 更新详情信息
    getDetail();
  } else {
    ElMessage.error("操作失败");
  }
};

const cancelEdit = () => {
  isEdit.value = false;
  name.value = originalName.value; // 恢复原始名称
  nameError.value = false;
};

const getDetail = async () => {
  const params = {
    id: router.currentRoute.value.query.id,
  };
  const { data } = await medialnfo(params);
  // 测试地址
  // data.fileUrl = "https://www.w3schools.com/html/mov_bbb.mp4";
  name.value = data.fileName;
  originalName.value = data.fileName; // 保存原始名称
  record.value = data;

  // 视频加载完成后设置默认音量
  setTimeout(() => {
    if (videoRef.value) {
      videoRef.value.volume = 0; // 设置音量为0
      videoRef.value.muted = true; // 设置静音
    }
  }, 100);
};

onMounted(() => {
  getDetail();

  // 点击其他地方隐藏音量滑块
  const handleClickOutside = (event: MouseEvent) => {
    const target = event.target as HTMLElement;
    if (!target.closest(".video-btns")) {
      showVolumeSlider.value = false;
    }
  };

  document.addEventListener("click", handleClickOutside);

  // 组件销毁时移除事件监听
  onUnmounted(() => {
    document.removeEventListener("click", handleClickOutside);
  });
});
</script>

<style scoped lang="scss">
.page {
  width: 100%;
  height: calc(100vh - 86px);
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
}

.left {
  width: calc(100% - 1246px);
  height: 100%;
  background: #000;
}

.title-left {
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.time {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

.center {
  width: 900px;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 添加单行省略号样式 */
.single-line-ellipsis {
  display: inline-block;
  max-width: 300px; /* 根据实际需要调整宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.edit-name {
  width: 180px !important;
}

.video {
  width: 900px;
  height: 506px;
}

/* 隐藏原生视频控制器的音量按钮 */
.video::-webkit-media-controls-volume-slider,
.video::-webkit-media-controls-mute-button {
  display: none !important;
}

.video::-moz-media-controls-volume-slider,
.video::-moz-media-controls-mute-button {
  display: none !important;
}

.video-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  position: absolute;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
}

.img-center {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.img-play {
  width: 38px;
  height: 38px;
  margin: 0 34px;
  cursor: pointer;
}

.margin-left {
  margin-left: 32px;
}

.time-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 14px;
  margin-top: 150px;
}

.content {
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  width: 308px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 38px;
}

.close {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 24px;
  right: 24px;
  cursor: pointer;
}

.info-container {
  width: 284px;
  height: 506px;
  background: #191919;
}

.info {
  display: flex;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  place-content: flex-start flex-start;
  padding-left: 14px;
}

h3 {
  font-weight: 600;
  font-size: 12px;
  margin-top: 24px;
  margin-bottom: 20px;
}

.dui {
  width: 14px;
  height: 14px;
  margin-left: 8px;
  cursor: pointer;
}

.item {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
  font-size: 12px;
}

.title {
  font-weight: 500;
  opacity: 0.6;
  width: 50px;
  margin-right: 18px;
}

.edit {
  color: var(--el-color-primary);
  margin-left: 10px;
  cursor: pointer;
}

.recover {
  position: absolute;
  left: 16px;
  bottom: 10px;
  width: 14px;
  height: auto;
  cursor: pointer;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

:deep(.el-input__wrapper) {
  background-color: #191919;
  border-radius: none;
  box-shadow: none;
  font-size: 10px;
}

:deep(.el-input__inner) {
  color: #fff;
}

// .item:nth-child(2n) {
//   margin-right: 0px !important;
// }

// .img {
//   width: 26px;
//   height: 26px;
//   margin: 16px 14px;
// }

// .text {
//   font-weight: 600;
//   font-size: 12px;
//   margin-bottom: 2px;
// }

/* 音量控制样式 */
.volume-slider-container {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-22%);
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
}

.volume-display {
  color: #fff;
  font-size: 12px;
  margin-bottom: 8px;
  text-align: center;
  font-weight: bold;
}

.volume-slider {
  width: 6px;
  height: 100px;
  -webkit-appearance: none;
  background: #555;
  border-radius: 3px;
  outline: none;
  transform: rotate(360deg); /* 翻转滑块方向，使得从下到上滑动时增加音量 */
  writing-mode: bt-lr; /* IE */
  -webkit-appearance: slider-vertical; /* Chrome */
  appearance: slider-vertical;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.video-container {
  position: relative;
  width: 900px;
  height: 506px;
}

.video-title {
  position: absolute;
  top: -38px;
  left: 0;
}

.video-title-info {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.dui {
  width: 14px;
  height: 14px;
  margin-left: 8px;
  cursor: pointer;
}

.edit {
  width: 14px;
  height: 14px;
  margin-left: 8px;
}

:deep(.el-input__wrapper) {
  background-color: #191919;
  border-radius: none;
  box-shadow: none;
  font-size: 14px;
}

:deep(.el-input__inner) {
  color: #fff;
}

.video-info {
  width: 239px;
  height: 506px;
  background: #191919;
}

.text-name {
  font-weight: 500;
  font-size: 11px;
  opacity: 0.6;
  color: #ffffff;
  margin-bottom: 6px;
}

.text-val {
  font-weight: 500;
  font-size: 11px;
  color: #ffffff;
  margin-bottom: 18px;
}

.item-info {
  padding-top: 18px;
}

.infoText-container {
  padding-left: 14px;
}

.editNamewidth {
  width: 200px;
}

@media (min-width: 1900px) {
  .editNamewidth {
    width: 250px;
  }
  .left {
    width: calc(100% - 1660px);
  }

  .center {
    width: 1200px;
    height: 675px;
  }

  .single-line-ellipsis {
    max-width: 330px;
  }

  .edit-name {
    width: 210px !important;
  }

  .content {
    width: 378px;
    font-size: 14px;
    margin-left: 50px;
  }

  .video-info {
    width: 378px;
    height: 674px;
  }

  .video-title-info {
    font-size: 16px;
    left: 12px;
  }

  .info-container {
    width: 378px;
    height: 674px;
    background: #191919;
  }

  .info {
    padding-left: 20px;
  }

  h3 {
    font-size: 16px;
    margin-top: 32px;
    margin-bottom: 28px;
  }

  .title-left {
    font-size: 21px;
  }

  .video {
    width: 1200px;
    height: 674px;
  }

  /* 隐藏原生视频控制器的音量按钮 */
  .video::-webkit-media-controls-volume-slider,
  .video::-webkit-media-controls-mute-button {
    display: none !important;
  }

  .video::-moz-media-controls-volume-slider,
  .video::-moz-media-controls-mute-button {
    display: none !important;
  }

  .title {
    width: 50px;
    margin-right: 30px;
  }

  .time {
    width: 18px;
    height: 18px;
    margin-right: 8px;
  }

  .video-btns {
    margin-top: 40px;
    bottom: -60px;
  }

  .img-center {
    width: 28px;
    height: 28px;
  }

  .img-play {
    width: 50px;
    height: 50px;
    margin: 0 46px;
  }

  .margin-left {
    margin-left: 44px;
  }

  .time-container {
    margin-top: 200px;
  }

  .close {
    width: 20px;
    height: 20px;
    top: 34px;
    right: 4px;
  }

  // .item {
  //   width: 148px;
  //   height: 80px;
  //   margin-right: 16px;
  //   margin-bottom: 16px;
  // }

  .img {
    width: 36px;
    height: 36px;
    margin: 22px 20px;
  }

  .text {
    font-size: 16px;
  }

  /* 响应式音量控制样式 */
  .volume-slider-container {
    padding: 12px;
    min-width: 60px;
  }

  .volume-display {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .volume-slider {
    width: 8px;
    height: 120px;
  }

  .volume-slider::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }

  .volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }

  .video-container {
    position: relative;
    width: 1200px;
    height: 675px;
  }

  :deep(.el-input__wrapper) {
    font-size: 14px;
  }

  .dui {
    width: 18px;
    height: 18px;
    margin-left: 12px;
  }

  .edit {
    width: 18px;
    height: 18px;
    margin-left: 10px;
  }

  .text-name {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .text-val {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .item-info {
    padding-top: 24px;
  }

  .infoText-container {
    padding-left: 20px;
  }
}

/* 添加多行内容样式 */
.multi-line-content {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
  max-height: 200px;
  overflow-y: auto;
}

.spanText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  // width: 100%;
}

:deep(.el-textarea__inner) {
  font-size: 12px !important;
}
</style>